<template>
  <div id="msgBox" unselectable="on" :style="msgBoxStyle">
    <img src="@/assets/img/x_32.png" class="closeIcon" @click="closeClick">
    <span>{{msgText}}</span>
  </div>
</template>

<script>
	export default {
		name: "MessageBox",
    props: {
			msgText: {
				type: String,
        default: ''
      },
			msgBoxStyle: {
				type: Object,
        default: {}
      }
    },
    methods: {
			closeClick() {
				this.$emit('msgBoxClose');
      }
    }
	}
</script>

<style scoped>
  #msgBox {
    width: auto;
    height: 25px;
    padding: 10px 40px;
    background-color: #ffffff;
    border-radius: 3px;
    position: absolute;
    top: 66%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 25px;
    border: 1px solid #97BAF7;
    color: red;
    -webkit-user-select: none;
    font-size: 14px;
  }
  .closeIcon {
    position: absolute;
    right: 0;
    top: 0;
    width: 17px;
    height: 17px;
    cursor: pointer;
  }
</style>